import { onMounted, ref, unref, Ref } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { isNotEmpty } from '../is';
import { useAppStore } from '@/store/app';

export const useResizeHeight = (targetRef?: Element | Ref<Element>) => {
    const appStore = useAppStore();

    const tableHeight = ref<number>(380);
    const tableListWrapRef = ref<Element>();

    onMounted(() => {
        const element = isNotEmpty(targetRef) ? unref(targetRef) : unref(tableListWrapRef);
        if (element) {
            useResizeObserver(element, ([{ target }]) => {
                tableHeight.value = target.clientHeight;
            });
        }
    });

    return {
        tableHeight,
        tableListWrapRef,
    };
};
